<template>
	<view class="video_info">
		<view class="username">
			<u-icon name="github-circle-fill" :label="username" size="18px" labelSize="1.1em" labelColor="#c2b740"
				color="#c2b740"></u-icon>
		</view>
		<view class="message">
			<u-icon name="bookmark" :label="message" labelSize="1em" labelColor="#d3d3d3" color="#d3d3d3"></u-icon>
		</view>
		<view class="progress">
			<u-line-progress :percentage="progressValue" :showText="false" activeColor="#51aa37" inactiveColor="#656565"
				height="4"></u-line-progress>
			<text class="progress_time">{{formatSeconds}}</text>
			<u-icon name="scan" size="1.8em" color="#d3d3d3"></u-icon>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		name: "VideInfo",
		props: {
			username: {
				type: String,
				requires: true
			},
			message: {
				type: String,
				requires: true
			},
			videoDurationTime: Number, // 总时长
			videoCurrentTime: Number, // 播放时长
		},
		computed: {
			/* 返回视频剩余时间，并将秒数格式化为 HH:MM:SS格式 */
			formatSeconds() {
				const surplusTime = this.videoDurationTime - this.videoCurrentTime
				let secondTime = parseInt(surplusTime);
				let minuteTime = 0;
				let hourTime = 0;
				if (secondTime >= 60) {
					minuteTime = parseInt(secondTime / 60);
					secondTime = parseInt(secondTime % 60);
					if (minuteTime >= 60) {
						hourTime = parseInt(minuteTime / 60);
						minuteTime = parseInt(minuteTime % 60);
					}
				}
				// 补0
				hourTime = hourTime < 10 ? "0" + hourTime : hourTime;
				minuteTime = minuteTime < 10 ? "0" + minuteTime : minuteTime;
				secondTime = secondTime < 10 ? "0" + secondTime : secondTime;
				let res = hourTime + ":" + minuteTime + ":" + secondTime;
				return res;
			},
			progressValue() {
				const time = this.videoCurrentTime / this.videoDurationTime * 100
				return time || 0
			}
		},
	}
</script>

<style scoped>
	.video_info {
		width: 100%;
		max-height: 100px;
		/* background-color: rgba(0,0,0,.1); */
		box-sizing: border-box;
		padding: 4px 8px;
	}

	.username {
		height: 1.5em;
	}

	.progress {
		height: 2em;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.progress_time {
		margin: 0 8px;
		color: #d3d3d3;
	}
</style>
